﻿@using DCMS.Web.Extensions;
@using DCMS.Web.Framework;
@using DCMS.Web.Framework.UI;
@using DCMS.ViewModel.Models.Finances;
@using DCMS.ViewModel.Models.Sales;
@using System.Collections.Generic;
@using System.Linq;
@using DCMS.Core.Domain.Common;

@model SaleReportSaleQuantityTrendListModel

<section id="content_wrapper">

    <!-- Start: Topbar-Dropdown -->
    <div id="topbar-dropmenu">
        @await Html.PartialAsync("_ToolBox")
    </div>
    <!-- End: Topbar-Dropdown -->
    <!-- Start: Topbar -->
    <header id="topbar">
        <div class="topbar-left">
            <ol class="breadcrumb">
                <li class="crumb-active">
                    <a href="#">销售</a>
                </li>
                <li class="crumb-icon">
                    <a href="@Url.RouteUrl("HomePage")">
                        <span class="glyphicon glyphicon-home"></span>
                    </a>
                </li>
                <li class="crumb-link">
                    <a href="#">销售报表</a>
                </li>
                <li class="crumb-trail">销量走势图</li>
            </ol>
        </div>
        <div class="topbar-right">
            <div class="ml15 ib va-m" id="toggle_sidemenu_r">
                <a href="#" class="pl5">
                    <i class="fa fa-sign-in fs22 text-primary"></i>
                    <span class="badge badge-hero badge-danger">3</span>
                </a>
            </div>
        </div>
    </header>
    <!-- End: Topbar -->
    <!-- Begin: Content -->
    <section id="content" class="formSection">

        <div class="special-alerts">
            <div class="alert alert-danger light alert-dismissable" id="alert-demo-2" style="display: none;">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <i class="fa fa-info pr10"></i>
                <strong>您没有被授权此操作!</strong>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">

                <form asp-action="SaleReportSaleQuantityTrend" asp-controller="SaleReport" method="get" id="formSearch" novalidate="novalidate">

                    <div class="panel panel-default" id="panel0">
                        <div class="panel-heading">
                            <span class="glyphicon glyphicon-search"></span> 高级搜索
                            <a class="btn btn-default btn-sm pull-right m5 mrn p5 pbn" id="AdvancedSearch"><i class="fa fa-angle-double-right"></i></a>
                        </div>
                        <div class="panel-body p10">

                            <div class="row">
                                <div class="col-sm-2">
                                    <dcms-editor asp-for="StartTime" placeholder="开始..." />
                                </div>
                                <div class="col-sm-2">
                                    <dcms-editor asp-for="EndTime" placeholder="结束..." />
                                </div>

                                <div class="col-sm-2">
                                    <dcms-select asp-for="GroupByTypeId" asp-items="@Model.GroupByTypes" class="form-control" />
                                </div>
                                <div class="col-sm-6">
                                    <button id="btn_query" type="submit" class="btn btn-primary btn-block">
                                        <span class="glyphicon glyphicon-search mr5" aria-hidden="true"></span>查询
                                    </button>
                                </div>
                            </div>

                        </div>
                    </div>
                </form>

                <div class="panel">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <span class="glyphicon glyphicon-tasks"></span> 报表
                        </div>
                    </div>
                    <div class="panel-body p10">

                        <div class="bootstrap-table">
                            <div class="fixed-table-toolbar">
                                <div class="bs-bars pull-left">
                                    <div id="toolbar" class="btn-group mb10">
                                        @*<button id="btn_export" type="button" class="btn btn-info btn-sm mr5">
                        <span class="glyphicon glyphicon-export mr5"></span>导出
                    </button>
                    <button id="btn_print" type="button" class="btn btn-alert btn-sm mr5">
                        <span class="glyphicon glyphicon-print mr5"></span>打印
                    </button>*@
                                        <a href="@Url.Action("SaleReportSaleQuantityTrend")" class="btn btn-default btn-sm">
                                            <span class="glyphicon glyphicon-refresh mr5"></span>重置
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-default" id="panel1">
                                <div class="row">
                                    <!-- Three panes -->
                                    <div class="col-md-12 admin-grid">
                                        <div class="panel sort-disable">
                                            <div class="panel-heading">
                                                <span class="panel-title">统计图</span>
                                                <a class="btn btn-default btn-sm pull-right m5 mrn p5 pbn" id="AdvancedChart"><i class="fa fa-angle-double-right"></i></a>
                                            </div>
                                            <div class="panel-body pn">
                                                @*<div id="high-line" style="width: 100%; height: 400px; margin: 0 auto"></div>*@
                                                <div id="high-line3" style="width: 100%; height: 400px; margin: 0 auto"></div>
                                            </div>
                                            <input type="hidden" id="hidCharts" value="@Model.Charts" />
                                        </div>
                                    </div>
                                    <!-- end: .col-md-12.admin-grid -->
                                </div>
                            </div>

                            <div class="fixed-table-container">
                                <div class="fixed-table-body">

                                    <table class="table table-striped table-bordered table-hover">
                                        <tr class="datagrid-header-row">
                                            <th class="text-center"><div class="th-inner">日期</div></th>
                                            <th class="text-right"><div class="th-inner">销售净额</div></th>
                                        </tr>
                                        <tbody>

                                            @{
                                                if (Model.Items != null && Model.Items.Count > 0)
                                                {
                                                    @foreach (var item in Model.Items)
                                                    {

                                                        <tr>

                                                            <td class="text-center">@item.ShowDate</td>
                                                            <td class="text-right">￥ @((item.NetAmount ?? 0).ToString("0.00"))</td>
                                                        </tr>
                                                    }

                                                    <tr>
                                                        <td class="text-center"><b>总计</b></td>
                                                        <td class="text-right">￥ <b>@(Model.Items.Sum(p => p.NetAmount))</b></td>

                                                    </tr>
                                                }
                                                else
                                                {

                                                    <tr class="no-records-found"><td class="text-center" colspan="2">没有找到匹配的记录</td></tr>
                                                }
                                            }

                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            @{
                                var pager = Html.Pager(Model.PagingFilteringContext).QueryParam("pagenumber");
                            }

                            @if (!pager.IsEmpty())
                            {
                                <div class="fixed-table-pagination" style="display: block;">
                                    @Html.Raw(pager.ToString())
                                </div>
                            }
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>


    </section>

    <!-- End: Content -->
</section>


@await Html.PartialAsync("_Windows", Model)


@{
//Html.AddCssFileParts(ResourceLocation.Head, "~/assets/skin/default_skin/css/theme.css");
//Html.AddCssFileParts(ResourceLocation.Head, "~/Scripts/Toastr/toastr.css");
//Html.AddCssFileParts(ResourceLocation.Head, "~/Scripts/Tables/bootstrap-table.css");

//Html.AddCssFileParts(ResourceLocation.Head, "~/vendor/plugins/datepicker/css/bootstrap-datetimepicker.css");
//Html.AddCssFileParts(ResourceLocation.Head, "~/vendor/plugins/daterange/daterangepicker.css");
//Html.AddCssFileParts(ResourceLocation.Head, "~/vendor/plugins/colorpicker/css/bootstrap-colorpicker.min.css");
//Html.AddCssFileParts(ResourceLocation.Head, "~/vendor/plugins/tagmanager/tagmanager.css");
//Html.AddCssFileParts(ResourceLocation.Head, "~/vendor/plugins/fancytree/skin-win8/ui.fancytree.min.css");

//Html.AddCssFileParts(ResourceLocation.Head, "~/Content/Site.css");

}

@section CurPageScripts
{
    @{
//Html.AddScriptParts(ResourceLocation.Footer, "~/assets/js/utility/jquery.sparkline.min.js");
//Html.AddScriptParts(ResourceLocation.Footer, "~/Scripts/jquery.validate.min.js");
//Html.AddScriptParts(ResourceLocation.Footer, "~/Scripts/jquery.validate.unobtrusive.js");
//Html.AddScriptParts(ResourceLocation.Footer, "~/Scripts/Tables/jquery.treegrid.min.js");
//Html.AddScriptParts(ResourceLocation.Footer, "~/Scripts/Tables/bootstrap-table.js");
//Html.AddScriptParts(ResourceLocation.Footer, "~/Scripts/Tables/locale/bootstrap-table-zh-CN.min.js");
//Html.AddScriptParts(ResourceLocation.Footer, "~/Scripts/Tables/bootstrap-table-treegrid.js");
//Html.AddScriptParts(ResourceLocation.Footer, "~/Scripts/globalize.min.js");
//Html.AddScriptParts(ResourceLocation.Footer, "~/Scripts/moment.js");
//Html.AddScriptParts(ResourceLocation.Footer, "~/Scripts/moment-with-locales.js");
//Html.AddScriptParts(ResourceLocation.Footer, "~/vendor/plugins/daterange/daterangepicker.js");
//Html.AddScriptParts(ResourceLocation.Footer, "~/vendor/plugins/datepicker/js/bootstrap-datetimepicker.js");
//Html.AddScriptParts(ResourceLocation.Footer, "~/vendor/plugins/colorpicker/js/bootstrap-colorpicker.min.js");
//Html.AddScriptParts(ResourceLocation.Footer, "~/vendor/plugins/jquerymask/jquery.maskedinput.min.js");
//Html.AddScriptParts(ResourceLocation.Footer, "~/vendor/plugins/tagmanager/tagmanager.js");
//Html.AddScriptParts(ResourceLocation.Footer, "~/vendor/plugins/fancytree/jquery.fancytree-all.min.js");
//Html.AddScriptParts(ResourceLocation.Footer, "~/Scripts/Toastr/Toastr.min.js");
//Html.AddScriptParts(ResourceLocation.Footer, "~/Scripts/Custom/Common.js");
//Html.AddScriptParts(ResourceLocation.Footer, "~/assets/js/bootstrap/holder.min.js");
    }
    <script type="text/javascript">

                    jQuery(document).ready(function () {

                        "use strict";

                        // Init Theme Core
                        Core.init();

                        // Init Demo JS
                        Demo.init();

                        //权限提示
                        if ($(this).getUrlQueryString("Authorize") == "noAuthorize") {
                            $('#alert-demo-2').fadeToggle();
                            setTimeout(function () {
                                $('#alert-demo-2').fadeToggle();
                            }, 3000);
                        }

                        //高级搜索
                        $("#panel0 #AdvancedSearch").click(function () {
                            var ico = $(this).find(".fa");
                            if (ico.hasClass('fa-angle-double-right'))
                                ico.removeClass("fa-angle-double-right").addClass("fa-angle-double-down");
                            else
                                ico.removeClass("fa-angle-double-down").addClass("fa-angle-double-right");
                            $("#panel0").find(".panel-body").toggleClass("hidden fadeIn");
                        });

                        //统计图
                        $("#panel1 #AdvancedChart").click(function () {
                            var ico = $(this).find(".fa");
                            if (ico.hasClass('fa-angle-double-right'))
                                ico.removeClass("fa-angle-double-right").addClass("fa-angle-double-down");
                            else
                                ico.removeClass("fa-angle-double-down").addClass("fa-angle-double-right");
                            $("#panel1").find(".panel-body").toggleClass("hidden fadeIn");
                        });


                        //商品列表选择赋值
                        window.operateEventsPop = {
                            'click .rowSelect': function (e, value, row, index) {
                                var index = $(this).attr("data-id");
                                var keys = Object.keys(row.Units);
                                $("#ProductName").val(row.Name);
                                $("#ProductId").val(row.Id);
                                $('#ModalProductWindows').modal('hide');
                            }
                        };
                        $("#btn_search_product").click(function () {
                            $(this).productSelectShowModal($("#ModalProductWindows"), "/Product/AsyncSearchSelectPopup", null, "选择商品", $("#ProductModalForm"),
                                function () { });
                        });

                        //客户搜索
                        $(document).on('click', "#btn_search_customer", function () {
                            var actionUrl = "/Terminal/AsyncSearchSelectPopup";
                            $(this).showModalV2($("#TerminalSelectModalWindow"), actionUrl, { ids: "" }, "选择终端", $("#TerminalSelectForm"), function (rows) { });
                        });

                        window.operateEventsPopTerminal = {
                            'click .rowSelect': function (e, value, row, index) {
                                try {
                                    $("#TerminalId").val(row.Id);
                                    $("#TerminalName").val(row.Name);
                                    $('#TerminalSelectModalWindow').modal('hide');
                                }
                                catch (err) {
                                    console.log(err);
                                    $(this).showToastr(err);
                                    return;
                                }
                            }
                        };

                    //图表展示
                    // Define chart color patterns
                    @*var highColors = [bgWarning, bgPrimary, bgInfo, bgAlert,
                bgDanger, bgSuccess, bgSystem, bgDark
            ];

            var line1 = $('#high-line');
            var cols = [];
            var datas = [
            {
                name: '销售净额',
                data: []
            }
            ];

            if ("@Model.Charts"!= null && "@Model.Charts"!= "") {
                var chars = "@Model.Charts";
                var sp = chars.split(",");
                sp.forEach(function (a, b) {
                    if (a != "") {
                        cols.push(a.split("|")[0]);
                        var quantity = a.split("|")[1];
                        datas[0].data.push(Number(quantity));
                    }
                });
            }
            if (line1.length) {

                // High Line 1
                $('#high-line').highcharts({
                    credits: false,
                    colors: highColors,
                    chart: {
                        type: 'column',
                        zoomType: 'x',
                        panning: true,
                        panKey: 'shift',
                        marginRight: 50,
                        marginTop: -5,
                    },
                    title: {
                        text: null
                    },
                    xAxis: {
                        gridLineColor: '#EEE',
                        lineColor: '#EEE',
                        tickColor: '#EEE',
                        categories: cols
                    },
                    yAxis: {
                        min: -2,
                        tickInterval: 50,
                        gridLineColor: '#EEE',
                        title: {
                            text: '销售净额',
                            style: {
                                color: bgInfo,
                                fontWeight: '600'
                            }
                        }
                    },
                    plotOptions: {
                        spline: {
                            lineWidth: 3,
                        },
                        area: {
                            fillOpacity: 0.2
                        }
                    },
                    legend: {
                        enabled: false,
                    },
                    series: datas
                });

            }*@

                    ///
                    var highColors = [bgWarning, bgPrimary, bgInfo, bgAlert,
                    bgDanger, bgSuccess, bgSystem, bgDark
                    ];
                    var line3 = $('#high-line3');

                    var cols = [];
                    var datas = [
                    {
                    name: '销售净额',
                    data: []
                    }
                    ];

                    var charts = $("#hidCharts").val();
                        if (charts != null && charts != "") {
                            var chars = charts;
                            var sp = chars.split(",");
                            sp.forEach(function (a, b) {
                                if (a != "") {
                                    cols.push(a.split("|")[0]);
                                    var quantity = a.split("|")[1];
                                    datas[0].data.push(Number(quantity));
                                }
                            });
                        }

                    if (line3.length) {

                    // High Line 3
                    $('#high-line3').highcharts({
                    credits: false,
                    colors: highColors,
                    chart: {
                    backgroundColor: '#f9f9f9',
                    className: 'br-r',
                    type: 'line',
                    zoomType: 'x',
                    panning: true,
                    panKey: 'shift',
                    marginTop: 25,
                    marginRight: 1,
                    },
                    title: {
                    text: null
                    },
                    xAxis: {
                    gridLineColor: '#EEE',
                    lineColor: '#EEE',
                    tickColor: '#EEE',
                    labels: {
                    step: 0,
                    rotation: -45,
                    formatter: function () {
                    console.log(this.value);
                    return this.value;
                    //return "2018-10-" + (this.value + 1);
                    }
                    },
                    categories: cols
                    },
                    yAxis: {
                    min: 0,
                    tickInterval: 1000,
                    gridLineColor: '#EEE',
                    title: {
                    text: null,
                    }
                    },
                    plotOptions: {
                    spline: {
                    lineWidth: 3,
                    },
                    area: {
                    fillOpacity: 0.2
                    }
                    },
                    legend: {
                    enabled: true,
                    },
                    series: datas
                    });

                    }

                    //防止重复查询
                    var queryNumber = 1;
                    $("#btn_query").click(function () {
                    if (queryNumber > 1) {
                    return false;
                    }
                    queryNumber = queryNumber + 1;
                    });

                    });
    </script>
}
